<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=egde,chrome=1">
    <meta content=always name="referrer">
    <title>OpenLayers 3地图示例</title>
    <script type="text/javascript" src="../OL3/ol.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../OL3/ol.css" type="text/css">
</head>
<body>
    <div id="map" style="width: 100%; height: 400px"></div>
    <br>
    <div id="navigate-container">
        <input type="button" value="left" onClick="moveToLeft()">
        <input type="button" value="right" onClick="moveToRight()">
        <input type="button" value="up" onClick="moveToUp()">
        <input  type="button" value="down" onClick="moveToDown()">
        <input type="button" value="center" onClick="moveToCenter()">
        <input type="button" value="ZoomIn" onClick="zoomIn()">
        <input type="button" value="ZoomOut" onClick="zoomOut()">
        <input type="button" value="适配成都" onClick="fitToChengdu()">
    </div>
    <div id="Online TileMap">
        <input type="radio" name="mapSource" checked="checked" onclick="switch2OSM()">OpenStreetMap地图
        <input type="radio" name="mapSource" onclick="switch2BingMap()">BingMap地图
        <input type="radio" name="mapSource" onclick="switch2StamenMap()">StamenMap地图
        <input type="radio" name="mapSource" onclick="switch2gaoDeMap()">高德地图
        <input type="radio" name="mapSource" onclick="switch2yahooMap()">雅虎地图
    </div>
    <script>
        // var view = new ol.View({
        //     center: [0, 0],
        //     zoom: 2
        // })
        var layer = [
            new ol.layer.Tile({source: new ol.source.OSM})
        ]
        // Open Street Layer 地图层
        var openStreetMapLayer = new ol.layer.Tile({
            // source: new ol.source.OSM
            source: new ol.source.XYZ({
                url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            })
        })
        // Bing 地图层
        var bingMapLayer = new ol.layer.Tile({
            source: new ol.source.BingMaps({
                key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
                imagerySet: 'Road'
            })
        })
        // Stamen 地图层
        var stamenMapLayer = new ol.layer.Tile({
            source: new ol.source.Stamen({
                layer: 'watercolor'
            })
        })
        // 高德地图层
        var gaodeMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
            })
        })
        // yahoo地图层
        var yaohooMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                tileSize: 512,
                url: 'https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B'
            })
        })
        var map = new ol.Map({
            controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: false
                })
            }),
            // logo is not exist in ol.map
            logo: {src: '../img/dog.png'},
            // setting map converage
            layers: [
                openStreetMapLayer
            ],
            //setting view  to display map
            view: new ol.View({
                center: [104.06, 30.67], 
                projection: 'EPSG:4326',
                extent: [102, 29, 104, 31],
                zoom: 10,
                minZoom: 10,
                maxZoom: 14
            }),
            //setting div which id called map as map's vessel
            target: 'map'
        })
        function moveToLeft(){
            let view = map.getView();
            let mapCenter = view.getCenter();
            mapCenter[0] += 50000;
            view.setCenter(mapCenter);
            map.render()
        }
        function moveToRight(){
            let view = map.getView();
            let mapCenter = view.getCenter();
            mapCenter[0] -= 50000;
            view.setCenter(mapCenter);
            map.render()
        }
        function moveToUp(){
            let view = map.getView();
            let mapCenter = view.getCenter();
            mapCenter[1] -= 50000;
            view.setCenter(mapCenter);
            map.render()
        }
        function moveToDown(){
            let view = map.getView();
            let mapCenter = view.getCenter();
            mapCenter[1] += 50000;
            view.setCenter(mapCenter);
            map.render()
        }
        function moveToCenter() {
            let view = map.getView();
            view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
            map.render()
        }
        function zoomIn(){
            let view = map.getView();
            view.setZoom(view.getZoom() + 1)
        }
        function zoomOut(){
            let view = map.getView();
            view.setZoom(view.getZoom() - 1)
        }
        function fitToChengdu(){
            map.getView().fit([104, 30.6, 104.12, 30.74], map.getSize())
        }
        // 先移除当前地图，再添加Open Street Map 地图
        function switch2OSM(){
            map.removeLayer(map.getLayers().item(0));
            map.addLayer(openStreetMapLayer)
        }
        // 先移除当前地图，再添加Bing 地图
        function switch2BingMap(){
            map.removeLayer(map.getLayers().item(0));
            map.addLayer(bingMapLayer)
        }
        // 先移除当前地图，再添加Stamen地图
        function switch2StamenMap(){
            map.removeLayer(map.getLayers().item(0));
            map.addLayer(stamenMapLayer)
        }
        function switch2gaoDeMap(){
            map.removeLayer(map.getLayers().item(0));
            map.addLayer(gaodeMapLayer)
        }
        function switch2yahooMap(){
            map.removeLayer(map.getLayers().item(0));
            map.addLayer(yaohooMapLayer)
        }
    </script>
</body>
</html>